<template>
  <plus-table
    :columns="tableColumns"
    :table-data="tableData"
    has-index-column
    :title-bar="false"
    :actionBar="{
      showNumber: 4,
      buttons,
      width: 80,
      actionBarTableColumnProps: {
        align: 'center'
      }
    }"
    :pagination="{
      total,
      modelValue: pageInfo,
      pageSizeList: [10, 20, 50],
      align: 'right'
    }"
    max-height="calc(100vh - 860px)"
    @paginationChange="handlePaginationChange"
  />
</template>
<script setup lang="ts">
import { useTable } from "plus-pro-components";
import type { PageInfo } from "plus-pro-components";
import { tableColumns, buttons } from "./hooks";
import { tableData as sourceTableData } from "../../data";

const TestServe = {
  getList: async ({ page, pageSize }) => {
    return {
      data: sourceTableData.slice((page - 1) * pageSize, page * pageSize),
      total: sourceTableData.length
    };
  }
};

const { tableData, total, pageInfo } = useTable();

pageInfo.value.pageSize = 10;

const getList = async () => {
  try {
    const { data, total: dataTotal } = await TestServe.getList(pageInfo.value);
    tableData.value = data;
    total.value = dataTotal;
  } catch (error) {}
};
const handlePaginationChange = (_pageInfo: PageInfo): void => {
  pageInfo.value = _pageInfo;

  getList();
};

getList();
</script>
<style lang="scss" scoped>
//
</style>
